<template>
  <h1 class="row-title">不同方向</h1>
  <div class="row">
    <wl-tooltip content="this is a test" placement="top" @visible-change="handle">
      <wl-button type="primary"> top </wl-button>
    </wl-tooltip>
    <wl-tooltip content="this is a test" placement="bottom" @visible-change="handle">
      <wl-button type="success"> bottom </wl-button>
    </wl-tooltip>
    <wl-tooltip content="this is a test" placement="left" @visible-change="handle">
      <wl-button type="danger"> left </wl-button>
    </wl-tooltip>
    <wl-tooltip content="this is a test" placement="right" @visible-change="handle">
      <wl-button type="info"> right </wl-button>
    </wl-tooltip>
  </div>
  <h1 class="row-title">切换触发方式</h1>
  <div class="row">
    <wl-tooltip trigger="hover" content="this is a test" placement="top" @visible-change="handle">
      <wl-button type="success"> hover </wl-button>
    </wl-tooltip>

    <wl-tooltip trigger="click" content="this is a test" placement="top" @visible-change="handle">
      <wl-button type="success"> click </wl-button>
    </wl-tooltip>
  </div>
  <h1 class="row-title">手动触发</h1>
  <div class="row">
    <wl-button type="primary" @click="clickHandler"> 打开触发 </wl-button>
    <wl-button type="primary" @click="closeHandler"> 关闭触发 </wl-button>
    <wl-tooltip trigger="manual" ref="tooltipRef" content="this is a test" placement="right" @visible-change="handle">
      <wl-button type="success"> right </wl-button>
    </wl-tooltip>
  </div>
  <h1 class="row-title">延时触发</h1>
  <div class="row">
    <wl-tooltip :open-delay="2000" :close-delay="2000" content="this is a test" placement="top"
      @visible-change="handle">
      <wl-button type="primary"> top </wl-button>
    </wl-tooltip>
    <wl-tooltip :open-delay="2000" :close-delay="2000" content="this is a test" placement="bottom"
      @visible-change="handle">
      <wl-button type="success"> bottom </wl-button>
    </wl-tooltip>
    <wl-tooltip :open-delay="2000" :close-delay="2000" content="this is a test" placement="left"
      @visible-change="handle">
      <wl-button type="danger"> left </wl-button>
    </wl-tooltip>
    <wl-tooltip :open-delay="2000" :close-delay="2000" content="this is a test" placement="right"
      @visible-change="handle">
      <wl-button type="info"> right </wl-button>
    </wl-tooltip>
  </div>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const tooltipRef = useTemplateRef('tooltipRef')
const handle = (isShow) => {
  if (!isShow) {
    console.log("提示框显示")
  } else {
    console.log("提示框隐藏")
  }
}
const clickHandler = () => {
  tooltipRef.value.show()
}
const closeHandler = () => {
  tooltipRef.value.hide()
}
</script>

<style lang="scss" scoped></style>
